{include file='common/head'}
<body>
<style>
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        margin-left: 70px;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>

<div class="x-body">
    <form class="layui-form" method="post" action="javascript:;" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>标题
            </label>
            <div class="layui-input-inline">
                <input type="text" id="gname" name="title" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--复制来的tp5+layui的图片上传-->
        <div>
            <a href="javascript:;" class="file">选择文件
                <input type="file" name="img" required>
            </a>
            <img id="img" height="100" src="">
            <input type="hidden" id="img2" value="">
        </div>



        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>内容
            </label>
            <div class="layui-input-block" style="width: 600px;">
              	<textarea id="contents" name="content" ></textarea>
                <!--<textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea" rows="20"></textarea>-->
            </div>
           <!-- <div class="layui-input-inline">

                <input type="text" id="phone" name="content"  lay-verify="required"
                       autocomplete="off" class="layui-input" >
            </div>-->
        </div>

        <div>
            <div >
                <input type="hidden">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="zixunadd" onclick="add()" lay-submit="">
                提交
            </button>

            <!--<input type="submit" name="sub" value="提交" class="layui-btn" lay-filter="zixunadd">-->
        </div>
    </form>
</div>

<script src="__STATIC__/kindeditor/kindeditor-all.js"></script> 
<script charset="utf-8" src="__STATIC__/kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript">
 
KindEditor.ready(function(K) {

     //textarea 
      editor = K.create('#contents', { 
        //themeType: 'simple',
        resizeType : 1,  
        allowImageRemote : true,  
        width : '300px',  
        height : '400px',  
        uploadJson: '__STATIC__/kindeditor/php/upload_json.php',
        fileManagerJson: '__STATIC__/kindeditor/php/file_manager_json.php',
        //items : ['source','bold','italic','underline','forecolor','image'],  
      
        afterCreate: function(){this.sync();},  //此行可不写，不影响获取textarea的值
        afterBlur : function(){this.sync();}//需要添加的  
    });  

 
      //封面图实时上传
    K('#image').click(function() {
            editor.loadPlugin('image', function() {
                    editor.plugin.imageDialog({
                            imageUrl : K('#url').val(),
                            clickFn : function(url, title, width, height, border, align) {
                                    K('#url').val(url);
                                    K("#image_show").html('![]('+url+')');
                                    editor.hideDialog();
                            }
                    });
            });
    });
    
 
 
});
</script>
<script type="text/javascript">
    //上传图片预览
    var small_img = document.querySelector('input[name=small_img]');
    var img = document.querySelector('input[name=img]');
    small_imgs = document.querySelector('#small_img');
    imgs = document.querySelector('#img');
    if (small_img) {
        small_img.addEventListener('change', function() {
            var file = this.files[0];
            var reader = new FileReader();
            // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
            reader.addEventListener("load", function() {
                small_imgs.src = reader.result;
            }, false);
            // 调用reader.readAsDataURL()方法，把图片转成base64
            reader.readAsDataURL(file);
            $("img").eq(0).css("display", "block");
        }, false);
    }
    if(img){
        img.addEventListener('change', function() {
            var file = this.files[0];
            var reader = new FileReader();
            // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
            reader.addEventListener("load", function() {
                imgs.src = reader.result;
            }, false);
            // 调用reader.readAsDataURL()方法，把图片转成base64
            reader.readAsDataURL(file);
            $("img").eq(1).css("display", "block");
        }, false);
    }

    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '{:url("zixun/uploads")}'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })

    function add()
    {
        var formData = new FormData();
        var file = $("[name='img']").prop('files')[0];
        var title = $("[name='title']").val();
        var content = $("[name='content']").val();

        var img2 = $('#img2:hidden').val();
        if(typeof(file) === "undefined"  && img2 == '' ){
        layer.msg('请上传Bnner图片')
            return false;
        }
        formData.append("file", file);
        formData.append("title", title);
        formData.append("content", content);
        var url = '{:url("index/zixun/zixunadd")}';
        var loading = layer.msg('正在提交数据，请稍后...', {icon: 16,time:6000});
        $.ajax({
            type:'post',
            url:url,
            data:formData,
            contentType: false,
            processData: false,
            success:function(data){
                layer.close(loading);
                if(data.code==1){
                    layer.msg('添加成功',{icon:6,time:1500});
                    setTimeout(function(){window.parent.location.reload();},1000);
                }else{
                    layer.msg('添加失败',{icon:5,time:1500});
                }
            }

        })
    }

</script>
</body>

</html>